<template>

	<transition name="bounce">
		<div v-if="isShow" id="search-panel">

			<div class="search-condition" v-for="(condition,index) in conditions" :key="condition">
				<select class="form-control">
					<option v-for="(v,k) in header" :key="k" :value="k">{{v.title}}</option>
				</select>
				<span>：</span>

				<select class="form-control">
					<option value="like">包含</option>
					<option value="not like">不包含</option>
					<option value="=">等于</option>
					<option value="!=">不等于</option>
					<option value="is null">为空</option>
					<option value="is not null">不为空</option>
				</select>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<input class="form-control" />
				<span class="fa fa-close close-btn" @click="remove(index)"></span>
			</div>


			<div id="addCondition">
				<a href="javascript:void(0)" @click.stop="addCondition">
					<span style="font-weight: bold;">+</span> 添加搜索条件
				</a>
			</div>
			<div>
				
			</div>
			
		</div>

	</transition name="bounce">
</template>

<script>
	import SearchCondition from '@/components/table/SearchCondition.vue';
	var _index = 0;
	export default {
		props: ['isShow'],
		data() {
			return {
				conditions: [0],
				header:this.$parent.$parent.$data.header
			};
		},
		methods: {
			addCondition: function() {
				this.conditions.push(++_index);
				// this.conditions.push(this.$parent.$parent.$data.header);
			},
			remove: function(index) {
				this.conditions.splice(index,1);
			}

		}
	}
</script>

<style>
	#search-panel {
		width: 400px;
		height: 400px;
		border: 1px solid #ccc;
		border-radius: 5px;
		bottom: 80px;
		position: fixed;
		box-shadow: 0 0 10px #ccc;
		background: #f9f9f9;
		overflow: auto;
	}

	#addCondition {
		margin-bottom: 20px;
	}

	#addCondition a {
		text-decoration: none;
		color: #00A0E9;
		margin-left: 20px;
		font-size: 14px;
	}


	.bounce-enter-active {
		animation: bounce-in .3s;
	}

	.bounce-leave-active {
		animation: bounce-in .3s reverse;
	}

	@keyframes bounce-in {
		0% {
			height: 0;
		}

		100% {
			height: 400px;
		}
	}

	.search-condition {
		margin: 15px 10px;
	}

	.close-btn {
		width: 24px;
		height: 24px;
		line-height: 20px;
		text-align: center;
		margin-left: 11px;
		border-radius: 50%;
		color: #fff;
		border: 1px solid #989898;
		background: #ababab;
		cursor: pointer;
	}

	.close-btn:hover {
		animation: spin .5s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
